/* 
盒子模型
    边框 border
        粗细 px
        样式 solid dashed
        颜色
        四周都一样：border:1px solid #ff0000;
        单独给：border-right、left、top、bottom:1px solid #ff0000;
    内边距 padding
        四周都一样：padding:10px;
        上下一样，左右一样: padding:10px 20px;
        上，左右，下：padding:10px 20px 5px;
        上，右，下，左：padding:10px 20px 15px 30px;
        单独给：padding-right、left、top、bottom
    外边距 margin
        四周都一样：margin:10px;
        上下一样，左右一样: margin:10px 20px;
        上，左右，下：margin:10px 20px 5px;
        上，右，下，左：margin:10px 20px 15px 30px;
        单独给：margin-right、left、top、bottom

    外边距问题：
        1.上下叠压，左右相加
        2.向上/向下传递
    应用：布局应用
        在 父级元素 中 水平居中
        margin: ? auto;
*/
body{
    margin: 0;
}
.box{
    width: 100px;
    height: 100px;
    border:1px solid #ff0000;
    /* border-right:1px solid #ff0000;
    border-left:5px dashed #ff0000; */
    /* border-bottom: 0; */
    /* padding:10px; */
    /* padding:10px 20px; */
    /* padding:10px 20px 5px; */
    margin:8px;
}

span{
    /* margin: 20px; */
}

.box2{
    /* border:1px solid #000; */
    padding-top:10px;
}

.box2 div{
    height: 100px;
}

.box2 div:nth-child(1){
    background: red;
    /* margin-top: 10px; */
}

.box2 div:nth-child(2){
    background: yellow;
}

.box2 div:nth-child(3){
    background: green;
}

.box3{
    width: 400px;
    height: 50px;
    background: red;
}

.box3 div{
    width: 100px;
    height: 50px;
    background: yellow;
    margin:0 auto;
}